<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>自适应显示多个点标记</title>
    <link rel="stylesheet" href="{$protocol}cache.amap.com/lbs/static/main1119.css"/>
    <style>
        .info-tip {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 12px;
            background-color: #fff;
            height: 35px;
            text-align: left;
        }
    </style>
    <script src="{$protocol}cache.amap.com/lbs/static/es5.min.js"></script>
    <script src="{$protocol}webapi.amap.com/maps?v=1.4.6&key=您申请的key值"></script>
    <script type="text/javascript" src="{$protocol}cache.amap.com/lbs/static/addToolbar.js"></script>
</head>
<body>
<div id="container"></div>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: {$order_local},
        zoom: 13
    });
    map.clearMap();  // 清除地图覆盖物
    var markers = [{
        type: "order",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b1.png',
        position: {$order_local},
        pixel : [20,-10],
        title:"接单地址",
        content:"接单地址"
    }, {
        type: "on",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b2.png',
        position: {$on_car_local},
        pixel : [20,20],
        title:"上车地址",
        content:"{$on_car_name}"
    }, {
        type: "off",
        icon: '{$protocol}webapi.amap.com/theme/v1.3/markers/n/mark_b3.png',
        position: {$off_car_local},
        pixel : [20,40],
        title:"下车地址",
        content:"{$off_car_name}"
    }];
    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
    markers.forEach(function(marker) {
        if(marker.position){
            var mk = new AMap.Marker({
                map: map,
                position: [marker.position[0], marker.position[1]],
                offset: new AMap.Pixel(-12, -36)
            });
            mk.setTitle(marker.title+ ":" + marker.content);
            mk.setLabel({
                offset: new AMap.Pixel(marker.pixel[0], marker.pixel[1]),
                content: "<span style='color: red'>" + marker.title + "</span>" + ":" + marker.content
            });
        }
    });
    map.setFitView();

    /*var center = map.getCenter();
    var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;
    document.getElementById('tips').innerHTML = '成功添加三个点标记，其中有两个在当前地图视野外！';

    // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
        document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
    });*/
</script>
</body>
</html>